<template>
  <div class="print">
    <div class="top">
      <button class="left" type="button">补卡打印</button>
      <div class="right">
        <button @click="getDay">当日</button>
        <button @click="getWeek">本周</button>
        <button @click="getMonth">当月</button>
      </div>
    </div>
    <div
      class="table-container"
      ref="tableContainer"
      @scroll="handleScroll"
      style="overflow: auto; height: 100%"
    >
      <el-table
        :data="tableData"
        v-loading="loading"
        stripe
        style="overflow: auto; height: 100%; font-size: 20px"
      >
        <el-table-column prop="taskNo" label="任务编号"></el-table-column>
        <el-table-column prop="productCode" label="物料编码"></el-table-column>
        <el-table-column prop="productDesc" label="物料描述"></el-table-column>
        <el-table-column prop="taskAmount" label="工单数量"></el-table-column>
        <el-table-column prop="moldCode" label="模具编号"></el-table-column>
        <el-table-column prop="processName" label="工序"></el-table-column>
        <el-table-column prop="finishTime" label="完成时间"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getPrintData } from '@/api';

export default {
  name: 'ReissueCardPrint',
  data() {
    return {
      tableData: [], // 数据表格展示的数据
      // historyData: [],
      // isScrollingToBottom: false,
      loading: false,
      // pages: 0,
      total: 0,
      current: 1,
      size: 10,
      dayType: '',
    };
  },
  created() {
    this.getPrintList();
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true);
  },
  methods: {
    handleScroll() {
      const { tableContainer } = this.$refs;
      const { scrollHeight } = tableContainer;
      const { scrollTop } = tableContainer;
      const { clientHeight } = tableContainer;
      console.log(this.$refs.tableContainer.scrollHeight, '============');
      // 当滚动到底部时加载下一页数据
      if (scrollTop + clientHeight >= scrollHeight) {
        this.loadNextPage();
      }
    },
    // 获取表格列表数据
    async getPrintList() {
      this.loading = true;
      const res = await getPrintData({
        current: this.current,
        size: this.size,
        dayType: this.dayType,
      });
      console.log(res, '2222');
      if (res.data.records?.length) {
        this.tableData.push(...res.data.records);
        this.total = res.data.total;
      }
      this.loading = false;
    },
    loadNextPage() {
      if (this.loading) {
        return;
      }
      // 如果当前页已经加载完所有数据，则不再进行下一页的加载
      if ((this.current - 1) * this.size >= this.total) {
        return;
      }
      this.current += 1;
      this.getPrintList();
    },

    // 获取当日
    getDay() {
      this.dayType = 1;
      this.tableData = [];
      this.getPrintList();
    },
    getWeek() {
      this.dayType = 2;
      this.tableData = [];
      this.getPrintList();
    },
    getMonth() {
      this.dayType = 3;
      this.tableData = [];
      this.getPrintList();
    },
  },
};
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}
.print {
  width: 100%;
  height: 100%;
  .top {
    border-bottom: 1px solid #dcdfe6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      background-color: #409eff;
      height: 60px;
      width: 140px;
      line-height: 60px;
      font-size: 24px;
      color: #fff;
      text-align: center;
      border: none;
      margin-bottom: 12px;
    }
    .right {
      display: flex;
      width: 220px;
      justify-content: space-between;
      button {
        background-color: #409eff;
        border: 1px solid #797979;
        width: 70px;
        height: 50px;
        line-height: 45px;
        font-size: 24px;
        color: #fff;
        text-align: center;
        cursor: pointer;
      }
    }
  }
}
</style>
